<template>
  <ElBreadcrumb separator="/" :class="`${prefixCls} flex items-center h-full ml-[10px]`">
    <TransitionGroup appear enter-active-class="animate__animated animate__fadeInRight" >
       <ElBreadcrumbItem v-for="v in breadcrumbList" :to="path: disabled ? '' : v.path " :key='v.name'}>
        <template v-if="meta?.icon && breadcrumbIcon.value">
          <Icon :icon="meta.icon" class="mr-[5px]"></Icon> {{t(v?.meta?.title)}}
        </template>
        <template v-else>
          t(v?.meta?.title)
        </template>
       </ElBreadcrumbItem>

<!-- 

  return breadcrumbList.map((v) => {
    const disabled = v.redirect === 'noredirect'
    const meta = v.meta
    return (
      <ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}>
        {meta?.icon && breadcrumbIcon.value
          ? (
            <>
              <Icon icon={meta.icon} class="mr-[5px]"></Icon> {t(v?.meta?.title)}
            </>
          )
          : (
            t(v?.meta?.title)
          )}
      </ElBreadcrumbItem>
    )
  })
 -->



    </TransitionGroup>
  </ElBreadcrumb>
</template>
<script setup>
import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
import { ref, watch, computed, unref, defineComponent, TransitionGroup, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { usePermissionStore } from '@/store/modules/permission'
import { filterBreadcrumb } from './helper'
import { filter, treeToList } from '@/utils/tree'
import { useI18n } from '@/hooks/web/useI18n'
import { Icon } from '@/components/Icon'
import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'

const { currentRoute } = useRouter()
const { t } = useI18n()
const levelList = ref([])
const permissionStore = usePermissionStore()
const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('breadcrumb')

const appStore = useAppStore()

// 面包屑图标
const breadcrumbIcon = computed(() => appStore.getBreadcrumbIcon)

const menuRouters = computed(() => {
  const routers = permissionStore.getRouters
  return filterBreadcrumb(routers)
})
const breadcrumbList = ref([])
const getBreadcrumb = () => {
  const currentPath = currentRoute.value.path

  levelList.value = filter(unref(menuRouters), (node) => {
    return node.path === currentPath
  })

  breadcrumbList.value = treeToList(unref(levelList))
}
// const renderBreadcrumb = () => {
//   const breadcrumbList = treeToList(unref(levelList))
//   return breadcrumbList.map((v) => {
//     const disabled = v.redirect === 'noredirect'
//     const meta = v.meta
//     return (
//       <ElBreadcrumbItem to={{ path: disabled ? '' : v.path }} key={v.name}>
//         {meta?.icon && breadcrumbIcon.value
//           ? (
//             <>
//               <Icon icon={meta.icon} class="mr-[5px]"></Icon> {t(v?.meta?.title)}
//             </>
//           )
//           : (
//             t(v?.meta?.title)
//           )}
//       </ElBreadcrumbItem>
//     )
//   })
// }
watch(
  () => currentRoute.value,
  (route) => {
    if (route.path.startsWith('/redirect/')) {
      return
    }
    getBreadcrumb()
  },
  {
    immediate: true
  }
)
onBeforeMount(() => {

})

</script>

<style lang="less" scoped>
@prefix-cls: ~'@{elNamespace}-breadcrumb';

.@{prefix-cls} {
  :deep(&__item) {
    display: flex;
    .@{prefix-cls}__inner {
      display: flex;
      align-items: center;
      color: var(--top-header-text-color);

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  :deep(&__item):not(:last-child) {
    .@{prefix-cls}__inner {
      color: var(--top-header-text-color);

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  :deep(&__item):last-child {
    .@{prefix-cls}__inner {
      color: var(--el-text-color-placeholder);

      &:hover {
        color: var(--el-text-color-placeholder);
      }
    }
  }
}
</style>
